<template>
  <div class="container">
    <div class="box login">
      <div class="form-content">
        <div class="avtar">
          <div class="pic"><img src="@/assets/images/login.jpg" /></div>
        </div>
        <h1>Welcome back</h1>

        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="form"
        >
          <div>
            <el-form-item prop="username">
              <div>
                <i class="el-icon-user" />
                <el-input
                  name="username"
                  v-model="loginForm.username"
                  auto-complete="on"
                  type="text"
                  placeholder="请输入账号"
                />
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item prop="password">
              <i class="el-icon-key" />
              <el-input
                name="password"
                v-model="loginForm.password"
                type="password"
                placeholder="密码"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
          </div>
          <el-form-item class="btn">
            <el-button :loading="loading" @click.native.prevent="handleLogin"
              >登 陆</el-button
            >
          </el-form-item>
          <!-- <div class="btn">
            <button @click.native.prevent="handleLogin">登 陆</button>
          </div> -->
        </el-form>

        <p class="btn-something">
          还没有账号 ? <span class="signupbtn">signup</span>
        </p>
      </div>
    </div>
    <div class="box signup">
      <div class="form-content">
        <div class="avtar">
          <div class="pic">
            <img src="@/assets/images/register.jpg" alt="" />
          </div>
        </div>
        <h1>Let's get started</h1>

        <el-form
          ref="registerForm"
          v-model="registerForm"
          :rules="registerRules"
          class="form"
        >
          <div>
            <el-form-item prop="resName">
              <i class="el-icon-user"></i>
              <el-input
                v-model="registerForm.resName"
                type="text"
                auto-complete="on"
                placeholder="用户名"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item prop="email">
              <i class="el-icon-message"></i>
              <el-input
                placeholder="邮箱"
                v-model="registerForm.email"
                autocomplete="on"
                type="text"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item prop="resPassword">
              <i class="el-icon-key"></i>
              <el-input
                v-model="registerForm.resPassword"
                type="password"
                placeholde="密码"
                auto-complete="on"
              />
            </el-form-item>
          </div>
          <el-form-item class="btn">
            <el-button
              :loading="resLoading"
              @click.native.prevent="handleRegister"
              >注册</el-button
            >
          </el-form-item>
        </el-form>

        <p class="btn-something">
          已经有账号 ? <span class="loginbtn">login</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/login.css";
export default {
  name: "login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
      } else {
        callback();
      }
    };
    const validateEmail = (rule, value, callback) => {
      var regEmail =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (value != "" && !regEmail.test(value)) {
        this.registerForm.email = "";
        callback(new Error("邮箱格式错误！"));
      } else {
        callback();
      }
    };
    return {
      resLoading: false,
      loading: false,
      registerForm: {
        resName: "",
        resPassword: "",
        email: "",
      },
      registerRules: {
        email: [{ required: true, trigger: "blur", validate: validateEmail }],
        resName: [
          { required: true, trigger: "blur", validate: validateUsername },
        ],
        resPassword: [
          { required: true, trigger: "blur", validate: validatePass },
        ],
      },
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validate: validateUsername },
        ],
        password: [{ required: true, trigger: "blur", validate: validatePass }],
      },
      methods: {
        handleLogin() {
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              this.$store.dispath("Login", this.loginForm).then(() => {
                setCookie("username", this.loginForm.username, 15);
                setCookie("password", this.loginForm.password, 15);
              });
            }
          });
        },
      },
    };
  },
  mounted() {
    let login = document.querySelector(".login");
    let signup = document.querySelector(".signup");
    let loginbtn = document.querySelector(".loginbtn");
    let siginupbtn = document.querySelector(".signupbtn");
    // let user = document.querySelector(".head");
    siginupbtn.addEventListener("click", () => {
      console.log("siginupbtn");
      login.style.transform = "rotateY(180deg)";
      signup.style.transform = "rotateY(0deg)";
      user.innerHTML = "create account";
    });
    loginbtn.addEventListener("click", () => {
      console.log("loginbtn");
      login.style.transform = "rotateY(0deg)";
      signup.style.transform = "rotateY(-180deg)";
      // user.innerHTML = "account login"
    });
  },
};
</script>

<style></style>
